<template>
  <div class="person">
    <h1>ref</h1>
    <h2>一辆{{carRef.brand}}车,价值{{ carRef.price }}万</h2>
    <button @click="changePriceRef">修改汽车价格</button>
    <button @click="changeCarRef">修改汽车品牌</button>
    <h2>当前求和为：{{ sumRef }}</h2>
    <button @click="changeSumRef">点我sum+1</button>
    <hr>
    <h1>reactive</h1>
    <h2>一辆{{carReactive.brand}}车,价值{{ carReactive.price }}万</h2>
    <button @click="changePriceReactive">修改汽车价格</button>
    <button @click="changeCarReactive">修改汽车品牌</button>
    <h2>当前求和为：{{ sumReactive }}</h2>
     <button @click="changeSumReactive">点我sum+1</button>
  </div>
</template>
<script setup name="YeNan">
// ref对比reactive
// 一、宏观角度看
    //  1、ref用来定义：基本类型数据、对象类型数据
    //  2、reactive用来定义：对象类型数据 
// 二、区别：
    // 1、ref创建的变量必须使用.value  (可以使用volar插件自动添加.value)
    // 2、reactive重新分配一个新对象，会失去响应式(可以使用Object.assign去整体替换)
// 三、使用原则：
    // 1、若需要一个基本类型的响应式数据，则必须使用ref。
    // 2、若需要一个响应式对象，层级不深，ref、reactive都可以
    // 3、若需要一个响应式对象，且层级比较深，推荐使用reactive
import {reactive, ref} from 'vue'
let carRef = ref({brand:'奔驰',price:100})  
let carReactive = reactive({brand:'奔驰',price:100})  
let sumRef = ref(0)
// let sumReactive = reactive(0)    //报错，因为reactive只能创建对象类型的数据
let sumReactive = ref(0)


function changePriceRef(){
  carRef.value.price +=10 
  console.log('price',carRef.value.price);
  
}
function changePriceReactive(){
  carReactive.price +=10 
  console.log('price',carReactive.price);
  
}
function changeSumRef(){
  sumRef.value += 1
  // sumRef.value = ref(9)   //此时页面数据不刷新
}
function changeSumReactive(){
  sumReactive.value += 1
}

function changeCarRef(){
  // 相比较reactive，ref更加简洁
  carRef.value = {brand:'本田',price:15}
}
function changeCarReactive(){
  // car = {brand:'比亚迪',price:10}    //此时页面数据不刷新
  // car = reactive({brand:'比亚迪',price:10})    //此时页面不刷新,原因：这样操作其实是将car变成了一个新的响应式对象了，属于本质偏移了
  // 正确做法一：  适用于key ：value较少的对象数据
  // car.brand = '比亚迪'
  // car.price = 10
  // 正确做法二： 使用Object.assign(obj1,obj2,obj3，...)  //将obj2,obj3,...，每个对象的key：value都加在obj1里
  Object.assign(carReactive,{brand:'比亚迪',price:10})
}

</script>

<style>
button {
  margin-left: 10px;
}
</style>